<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CKEditor 5 – Classic editor</title>
		<script src="module/ckeditor5-build-classic/ckeditor.js"></script>
		<script src="module/ckeditor5-build-classic/translations/zh-cn.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>
		<h1>Classic editor</h1>
		<textarea name="content" id="editor">
        &lt;p&gt;This is some sample content.&lt;/p&gt;
    </textarea>
		<button onclick="DbInit()">初始化数据库</button>
		<button onclick="saveToDb()">增加文章进入数据库</button>
		<button onclick="updateToDb()">修改文章存储进数据库指定ID</button>
		<button onclick="readFromDb()">读取数据库中指定ID的内容</button>
		<button onclick="deleteFromDb()">删除数据库中指定ID的内容</button>
		<script>
			let editor;
			ClassicEditor
				.create(document.querySelector('#editor'), {
					// The UI of the editor as well as its content will be in German.
					language: 'zh-cn'
				})
				.then(newEditor => {
					editor = newEditor;
				})
				.catch(error => {
					console.error(error);
				});
			DbInit = () => {
				axios.get('./app/DbInit')
					.then(function(response) {
						console.log(response);
					})
					.catch(function(error) {
						console.log(error);
					});
			}
			saveToDb = () => {
				axios.post('./app/saveToDb', {
						params: {
							Atext: editor.getData()
						}
					})
					.then(function(response) {
						console.log(response);
					})
					.catch(function(error) {
						console.log(error);
					});
			}
			readFromDb = () => {
				axios.post('./app/readFromDb', {
						params: {
							Aid: 1
						}
					})
					.then(function(response) {
						console.log(response.data.data.Atext);
						editor.setData(response.data.data.Atext)
					})
					.catch(function(error) {
						console.log(error);
					});
			}
			//更新指定ID的内容
			updateToDb = () => {
				axios.post('./app/updateDb', {
						params: {
							Aid: 1,
							Atext:editor.getData()
						}
					})
					.then(function(response) {
						//console.log(response.data.data.Atext);
						editor.setData(response.data.data.Atext)
					})
					.catch(function(error) {
						console.log(error);
					});
			}
			//删除指定ID的内容
			deleteFromDb= () => {
				axios.post('./app/deleteFromDb', {
						params: {
							Aid: 3
						}
					})
					.then(function(response) {
						console.log(response);
					})
					.catch(function(error) {
						console.log(error);
					});
			}
			myclick = () => {
				alert(editor.getData());
			}
			setEditorData = () => {
				editor.setData("<p> this is a paragraph ! </p>")
			}
			destoryEditor = () => {
				editor.destroy()
					.catch(error => {
						console.log(error);
					});
			}
			listenChange = () => {
				editor.model.document.on('change:data', () => {
					console.log('The data has changed!');
				});
			}
		</script>
	</body>
</html>
